<template>
	<view>
		<commonShopList :dataList="dataList" :shopList="shopList" @changTab="changTab" @addData="addData">
		</commonShopList>
	</view>
</template>

<script setup>
	import {
		ref,
		toRefs
	} from "vue";
	import {
		onNavigationBarButtonTap,
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	import {
		getKeyword
	} from "@/util/api/api.js"
	let text = ref('');
	let dataList = ref([]);
	const shopList = ref({
		currentIndex: 0,
		pageIndex: 1,
		data: [{
				name: "价格",
				status: 1
			},
			{
				name: "折扣",
				status: 0
			},
			{
				name: "品牌",
				status: 0
			},
		]
	});

	// 添加数据
	const addData = () => {
		getKeywordData(shopList.value.data[shopList.value.currentIndex].name, ++shopList.value.pageIndex, shopList
			.value.data[shopList.value.currentIndex].status === 1 ? "asc" : "desc")
	}
	// 切换排序
	const changTab = (i) => {
		shopList.value.currentIndex = i;

		shopList.value.order = !shopList.value.order;
		shopList.value.data = shopList.value.data.map((item, index) => {
			if (i === index) {
				item.status === 1 ? item.status = 2 : item.status = 1;
			} else {
				item.status = 0;
			}
			return item;
		});
		
		dataList.value.length=0;
		shopList.value.pageIndex=1;
		getKeywordData(shopList.value.data[i].name, 1, shopList.value.data[shopList.value.currentIndex]
			.status === 1 ?
			"asc" : "desc");

		if (shopList.value.data[shopList.value.currentIndex].status === 1) {
			if (shopList.value.currentIndex === 0) {
				dataList.value.sort((a, b) => a.price1 - b.price1);
			} else {
				dataList.value.sort((a, b) => b.price1 - a.price1);
			}
		} else {
			if (shopList.value.currentIndex === 0) {
				dataList.value.sort((a, b) => a.discount - b.discount);
			} else {
				dataList.value.sort((a, b) => b.discount - a.discount);
			}
		}
	}
	// 
	const getKeywordData = async (orderName = "价格", pageMun = 1, order = "asc") => {
		const res = await getKeyword(text.value, orderName, pageMun, order);
		res.length === 0 ? uni.showToast({
			title: "到底了...",
			icon: "none"
		}) : "";
		dataList.value = [...dataList.value, ...res];
	}
	// searchInput text 赋值
	const searchInputText = () => {
		// vue3 uniapp searchInput app-plus的设置
		var pages = getCurrentPages();
		var page = pages[pages.length - 1];
		// #ifdef APP-PLUS
		var currentWebview = page.$getAppWebview();
		currentWebview.setTitleNViewSearchInputText(text.value);
		// #endif
		// #ifdef H5
		document.querySelector(".uni-input-input").value = text.value
		// #endif
	}


	onLoad(async (option) => {
		text.value = option.text;

		await getKeywordData()
	})
	onReady(() => {
		searchInputText()
	})
	onNavigationBarButtonTap((e) => {
		e.text = text.value;
	})
</script>

<style lang="scss" scoped>
	.uni-page-head {
		padding: 0;
	}

	.search-item {
		padding: 20rpx;

		.search-title {
			display: flex;
			justify-content: space-between;
		}

		.search-name {
			padding: 4rpx 24rpx;
			background-color: #e1e1ee;
			display: inline-block;
			border-radius: 26rpx;
			margin: 10rpx;
		}
	}
</style>
